<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>详细内容</title>
    <script src="../assets/js/views/vue.min.js"></script>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/common.css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/department/addDepartment.scss">
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <link rel="stylesheet" href="${assets}/css/views/department/addDepartment.css">
    <style>
        .header h1{
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            color: #2a3137;
            margin-bottom: 26px;
            float: left;
            margin-top:0px;
        }
        .change{
            width:100%;
            margin-top:70px;
        }
        .btn{
            width:100px;
            line-height: 15px;
            background: #35acfd;
            color: white;
            margin-top:15px;
        }

        .modal-footer{
            width:255px;
            margin:0 auto;
        }
        #keep{
            background:#35acfd !important;
        }
        .prompt h1{
            font-family: MicrosoftYaHei;
            font-size: 24px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.5px;
            color: #35acfd;
            display:block;
            width:100%;
            line-height:40px;
        }
        p{
            font-size: 17px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 25px;
            color: #2a3137;
            margin:0;
            padding:0;
        }
        .list{
            width:680px;
            margin:0 auto;
            overflow:hidden;
            margin-top:16px;
        }
        .chank{
            width:50%;
            display:inline-block;
        }
        input[type=radio] {
            width:20px;
            height:20px;
            -webkit-appearance: none;
            border-radius:50%;
            background-image: url('../assets/images/nocheck.png');
            background-size:100% 100%;
            vertical-align: middle;
            margin:0;
            padding:0;
        }
        input[type=radio]:checked{
            background-image: url('../assets/images/checkout.png');
            background-size:100% 100%
        }
        label{
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #333333;
            word-wrap:break-word;
            margin-left:19px;
            margin-top:8px;
        }
        .chank:nth-child(5){
            margin-top:10px;
        }
        .chank:nth-child(5) label{
            width:208px;
            vertical-align: top;
            margin-top:0px;
        }
        .chank:nth-child(5) input{
            margin-top:5px;
        }
        .chank:nth-child(6) label{
            width:288px;
            vertical-align: top;
            margin-top:0px;
        }
        .chank:nth-child(6) input{
            margin-top:5px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="header">
            <h1>疼痛评估表</h1>
        </div>
        <div class="prompt">
            <h1>温馨提示:</h1>
            <p>如果您有疼痛，请您告诉我们</p>
            <p>请选择您的疼痛程度或者数字告诉医护人员</p>
        </div>
        <div class="list">
            <span class="chank" v-for="item in pain">
                <input type="radio" :id="item.idate" name="active" class="pain" :title="item.key"/>
                <label :for="item.idate">{{item.value}}</label>
            </span>
        </div>
        <div class="change">
            <div class="form-group submitBtn" style="text-align: center ">
                <button type="button" class="btn" data-dismiss="modal" id="closeModalButt" @click="closeFrame()">
                    关闭
                </button>
                <button type="submit" class="btn" id="keep" @click="keep()" style="margin-left:20px;">保存</button>
            </div>
        </div>
    </div>
    <script>
        var Vm = new Vue({
            el : '#main',
            data:{
                pain:[],
                id :'',
                painLevel:'',
                size:'',
                idCard:'',
                diseasesType:'',
                type:''
            },
            methods:{
                closeFrame:function(){
                    window.parent.simpleCloseModal();
                },
                keep:function(){
                    let that = this;
                    // 获取当前选中的单选框内容
                    var Input = $('.list input');
                    for( var a = 0; a < Input.length; a++ ){
                         if( Input[a].checked ){
                             that.size = Input[a].title
                         }
                    }
                    if( that.size === "" ){
                         alert('请选择信息')
                        return
                    }
                    $.ajax({
                        url:'${URL_INDEX_UPDATEPAIN}',
                        data:{
                            id : that.id,
                            painLevel : that.size
                        },
                        type:"post",
                        dataType:"json",
                        success:function(data){
                            if( data.success ){
                                parent.showSrc('${URL_PATIENT_TOARCHIVES}?idCard=' + that.idCard+'&diseasesType='+that.diseasesType+'&type='+that.type)
                                window.parent.simpleCloseModal();
                            }else{
                                alert('请选择信息')
                            }
                        }
                    })
                }
            },
            mounted(){
                // 初始化获取id信息
                let that = this;
                var url = location.search;
                var href = url.split('&')
                that.id = href[0].split('=')[1]
                that.painLevel = href[1].split('=')[1]
                that.idCard = href[2].split('=')[1]
                that.diseasesType = href[3].split('=')[1]
                that.type = href[4].split('=')[1]
            },
            created(){
                let that = this;
                // 初始化获取疼痛信息
                $.ajax({
                    url:"${URL_INDEX_SEARCHPAIN}",
                    type:'post',
                    dataType: "json",
                    success:function(data){
                        that.pain = data.data.reverse();
                        for( var a = 0; a < that.pain.length; a++ ){
                            that.pain[a].idate = 'pain' + that.pain[a].key
                        }
                    }
                })
            },
            updated(){
                let that = this;
                var Input = $(".pain");
                if( that.painLevel != null ){
                    $(Input[that.painLevel]).attr("checked","checked")
                }else{
                    return
                }
            }
        })
    </script>
</body>
</html>